import FlowEcharts from "./lib/FlowEcharts";
import chinaGeoCoordMap from './lib/chinaGeoCoordMap.js';

export default class Metaptosis {
  constructor(basicCesium) {
    this.basicCesium = basicCesium
    this.viewer = basicCesium.viewer;

    this.instance = null;

    this.initChart();
  }

  initChart() {
    let chinaDatas = [
      [{
        name: '北京市',
        value: 2
      }],
      [{
        name: '黑龙江',
        value: 0
      }],
      [{
        name: '内蒙古',
        value: 0
      }],
      [{
        name: '吉林',
        value: 0
      }],
      [{
        name: '辽宁',
        value: 0
      }],
      [{
        name: '河北',
        value: 0
      }],
      [{
        name: '天津',
        value: 0
      }],
      [{
        name: '山西',
        value: 0
      }],
      [{
        name: '陕西',
        value: 0
      }],
      [{
        name: '甘肃',
        value: 0
      }],
      [{
        name: '宁夏',
        value: 0
      }],
      [{
        name: '青海',
        value: 0
      }],
      [{
        name: '新疆',
        value: 0
      }],
      [{
        name: '西藏',
        value: 0
      }],
      [{
        name: '四川',
        value: 0
      }],
      [{
        name: '重庆',
        value: 0
      }],
      [{
        name: '山东',
        value: 0
      }],
      [{
        name: '河南',
        value: 0
      }],
      [{
        name: '安徽',
        value: 0
      }],
      [{
        name: '湖北',
        value: 0
      }],
      [{
        name: '浙江',
        value: 0
      }],
      [{
        name: '福建',
        value: 0
      }],
      [{
        name: '江西',
        value: 0
      }],
      [{
        name: '湖南',
        value: 0
      }],
      [{
        name: '贵州',
        value: 0
      }],
      [{
        name: '广西',
        value: 0
      }],
      [{
        name: '海南',
        value: 0
      }],
      [{
        name: '上海',
        value: 1
      }]
    ];
    let series = [];
    let option = {
      animation: !1,
      backgroundColor: 'rgba(17, 19, 42, 0.2)',
      title: [{
        text: 'Cesium + Echarts 迁徙图',
        subtext: 'cesium echarts qian xi tu',
        left: 'center',
        top: 10,
        textStyle: {
          color: '#fff'
        },
        subtextStyle: {
          color: '#fff'
        }
      }],
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(166, 200, 76, 0.82)',
        borderColor: '#FFFFCC',
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: 'z-index:100',
        formatter: function (params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = "";
          var name = params.name;
          var value = params.value[params.seriesIndex + 1];
          res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
          return res;
        }
      },
      visualMap: { //图例值控制
        min: 0,
        max: 1,
        calculable: true,
        show: true,
        color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
      },
      GLMap: {},
      series: series
    };

    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = chinaGeoCoordMap[dataItem[0].name];
        var toCoord = [118.8062, 31.9208];
        if (fromCoord && toCoord) {
          res.push({
            name: dataItem[0].name,
            coords: [fromCoord, toCoord],
            lineStyle: {
              color: '#00eaff',
              width: 1, //尾迹线条宽度
              opacity: .5, //尾迹线条透明度
              curveness: .3 //尾迹线条曲直度
            },
          });
        }
      }
      return res;
    };


    [
      ['江苏', chinaDatas]
    ].forEach(item => {
      series.push({
        type: 'lines',
        coordinateSystem: 'GLMap',
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 6, //图标大小
        },
        data: convertData(item[1])
      }, {
        type: 'effectScatter',
        coordinateSystem: 'GLMap',
        zlevel: 2,
        rippleEffect: { //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) { //圆环显示文字
            return params.data.name;
          },
          fontSize: 13
        },
        emphasis: {
          show: true
        },
        symbol: 'circle',
        symbolSize: function (val) {
          return 5 + val[2] * 5; //圆环大小
        },
        itemStyle: {
          show: false,
          color: '#f00'
        },
        data: chinaDatas.map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
          };
        }),
      }, {
        type: 'scatter',
        coordinateSystem: 'GLMap',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          show: true,
          position: 'right',
          color: '#0f0',
          formatter: '{b}',
        },
        emphasis: {
          show: true,
          color: "#f60"
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      });
    })
    this.instance == null ? this.instance = new FlowEcharts(this.viewer, option) : this.instance.updateOverlay();
  }
}